<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js">var dataUtil = require(&quot;../core/utils/data_structure_util&quot;);

var classUtil = require(&quot;../core/utils/class_util&quot;);

var vectorUtil = require(&quot;../core/utils/vector_util&quot;);

var eventTool = require(&quot;../core/utils/event_util&quot;);

var MultiDragDrop = require(&quot;./MultiDragDrop&quot;);

var Eventful = require(&quot;./Eventful&quot;);

var GestureMgr = require(&quot;./GestureMgr&quot;);

<span id='qrenderer-event-QRendererEventHandler'>/**
</span> * @class qrenderer.event.QRendererEventHandler
 * Canvas 内置的API只在 canvas 实例本身上面触发事件，对画布内部的画出来的元素没有提供事件支持。
 * QRendererEventHandler.js 用来封装画布内部元素的事件处理逻辑，核心思路是，在 canvas 收到事件之后，派发给指定的元素，
 * 然后再进行冒泡，从而模拟出原生 DOM 事件的行为。
 * @docauthor 大漠穷秋 &lt;damoqiongqiu@126.com&gt;
 */
var SILENT = &#39;silent&#39;;
<span id='qrenderer-event-QRendererEventHandler-method-makeEventPacket'>/**
</span> * @private
 * @method
 * @param {String} eveType 
 * @param {Object} targetInfo 
 * @param {Event} event 
 */

function makeEventPacket(eveType, targetInfo, event) {
  return {
    type: eveType,
    event: event,
    // target can only be an element that is not silent.
    target: targetInfo.target,
    // topTarget can be a silent element.
    topTarget: targetInfo.topTarget,
    cancelBubble: false,
    offsetX: event.qrX,
    offsetY: event.qrY,
    gestureEvent: event.gestureEvent,
    pinchX: event.pinchX,
    pinchY: event.pinchY,
    pinchScale: event.pinchScale,
    wheelDelta: event.qrDelta,
    qrByTouch: event.qrByTouch,
    qrIsFromLocal: event.qrIsFromLocal,
    which: event.which,
    stop: stopEvent
  };
}
<span id='qrenderer-event-QRendererEventHandler-method-stopEvent'>/**
</span> * @private
 * @method
 * @param {Event} event  
 */


function stopEvent(event) {
  eventTool.stop(this.event);
}

function EmptyProxy() {}

EmptyProxy.prototype.dispose = function () {};

var handlerNames = [&#39;click&#39;, &#39;dblclick&#39;, &#39;mousewheel&#39;, &#39;mouseout&#39;, &#39;mouseup&#39;, &#39;mousedown&#39;, &#39;mousemove&#39;, &#39;contextmenu&#39;, &#39;pagemousemove&#39;, &#39;pagemouseup&#39;, &#39;pagekeydown&#39;, &#39;pagekeyup&#39;];
<span id='qrenderer-event-QRendererEventHandler-method-pageEventHandler'>/**
</span> * @method
 * 监听页面上触发的事件，转换成当前实例自己触发的事件
 * @param {String} pageEventName 
 * @param {Event} event 
 */

function pageEventHandler(pageEventName, event) {
  this.trigger(pageEventName, makeEventPacket(pageEventName, {}, event));
}
<span id='qrenderer-event-QRendererEventHandler-method-isHover'>/**
</span> * @method
 * 鼠标是否在指定的元素上方。
 * @param {Displayable} displayable 
 * @param {Number} x 
 * @param {Number} y 
 */


function isHover(displayable, x, y) {
  if (displayable[displayable.rectHover ? &#39;rectContain&#39; : &#39;contain&#39;](x, y)) {
    var el = displayable;
    var isSilent;

    while (el) {
      // If clipped by ancestor.
      // FIXME: If clipPath has neither stroke nor fill,
      // el.clipPath.contain(x, y) will always return false.
      if (el.clipPath &amp;&amp; !el.clipPath.contain(x, y)) {
        return false;
      }

      if (el.silent) {
        isSilent = true;
      }

      el = el.parent;
    }

    return isSilent ? SILENT : true;
  }

  return false;
}
<span id='qrenderer-event-QRendererEventHandler-method-afterListenerChanged'>/**
</span> * @private
 * @method
 * @param {Function} handlerInstance 
 */


function afterListenerChanged(handlerInstance) {
  //监听整个页面上的事件
  var allSilent = handlerInstance.isSilent(&#39;pagemousemove&#39;) &amp;&amp; handlerInstance.isSilent(&#39;pagemouseup&#39;) &amp;&amp; handlerInstance.isSilent(&#39;pagekeydown&#39;) &amp;&amp; handlerInstance.isSilent(&#39;pagekeyup&#39;);
  var proxy = handlerInstance.proxy;
  proxy &amp;&amp; proxy.togglePageEvent &amp;&amp; proxy.togglePageEvent(!allSilent);
}
<span id='qrenderer-event-QRendererEventHandler-method-constructor'>/**
</span> * @method constructor QRendererEventHandler
 * @param {Storage} storage Storage instance.
 * @param {Painter} painter Painter instance.
 * @param {HandlerProxy} proxy HandlerProxy instance.
 * @param {HTMLElement} painterRoot painter.root (not painter.getViewportRoot()).
 */


var QRendererEventHandler = function QRendererEventHandler(storage, painter, proxy, painterRoot) {
  Eventful.call(this, {
    afterListenerChanged: dataUtil.bind(afterListenerChanged, null, this)
  });
<span id='qrenderer-event-QRendererEventHandler-property-storage'>  /**
</span>   * @property storage
   */

  this.storage = storage;
<span id='qrenderer-event-QRendererEventHandler-property-painter'>  /**
</span>   * @property painter
   */

  this.painter = painter;
<span id='qrenderer-event-QRendererEventHandler-property-painterRoot'>  /**
</span>   * @property painterRoot
   */

  this.painterRoot = painterRoot;
  proxy = proxy || new EmptyProxy();
<span id='qrenderer-event-QRendererEventHandler-property-proxy'>  /**
</span>   * @property proxy
   * Proxy of event. can be Dom, WebGLSurface, etc.
   */

  this.proxy = null;
<span id='qrenderer-event-QRendererEventHandler-property-_hovered'>  /**
</span>   * @private 
   * @property {Object} _hovered
   */

  this._hovered = {};
<span id='qrenderer-event-QRendererEventHandler-property-_lastTouchMoment'>  /**
</span>   * @private
   * @property {Date} _lastTouchMoment
   */

  this._lastTouchMoment;
<span id='qrenderer-event-QRendererEventHandler-property-_lastX'>  /**
</span>   * @private
   * @property {Number} _lastX
   */

  this._lastX;
<span id='qrenderer-event-QRendererEventHandler-property-_lastY'>  /**
</span>   * @private
   * @property {Number} _lastY
   */

  this._lastY;
<span id='qrenderer-event-QRendererEventHandler-property-_gestureMgr'>  /**
</span>   * @private
   * @property _gestureMgr
   */

  this._gestureMgr;
  new MultiDragDrop(this);
  this.setHandlerProxy(proxy);
};

QRendererEventHandler.prototype = {
  constructor: QRendererEventHandler,

<span id='qrenderer-event-QRendererEventHandler-method-setHandlerProxy'>  /**
</span>   * @method setHandlerProxy
   * @param {*} proxy 
   */
  setHandlerProxy: function setHandlerProxy(proxy) {
    if (this.proxy) {
      this.proxy.dispose();
    }

    if (proxy) {
      dataUtil.each(handlerNames, function (name) {
        // 监听 Proxy 上面派发的原生DOM事件，转发给本类的处理方法。
        proxy.on &amp;&amp; proxy.on(name, this[name], this);
      }, this); // Attach handler

      proxy.handler = this;
    }

    this.proxy = proxy;
  },

<span id='qrenderer-event-QRendererEventHandler-method-mousemove'>  /**
</span>   * @method mousemove
   * @param {*} proxy 
   */
  mousemove: function mousemove(event) {
    var x = event.qrX;
    var y = event.qrY;
    var lastHovered = this._hovered;
    var lastHoveredTarget = lastHovered.target; // If lastHoveredTarget is removed from qr (detected by &#39;__qr&#39;) by some API call
    // (like &#39;setOption&#39; or &#39;dispatchAction&#39;) in event handlers, we should find
    // lastHovered again here. Otherwise &#39;mouseout&#39; can not be triggered normally.
    // See #6198.

    if (lastHoveredTarget &amp;&amp; !lastHoveredTarget.__qr) {
      lastHovered = this.findHover(lastHovered.x, lastHovered.y);
      lastHoveredTarget = lastHovered.target;
    }

    var hovered = this._hovered = this.findHover(x, y);
    var hoveredTarget = hovered.target;
    var proxy = this.proxy;
    proxy.setCursor &amp;&amp; proxy.setCursor(hoveredTarget ? hoveredTarget.cursor : &#39;default&#39;); // Mouse out on previous hovered element

    if (lastHoveredTarget &amp;&amp; hoveredTarget !== lastHoveredTarget) {
      this.dispatchToElement(lastHovered, &#39;mouseout&#39;, event);
    } // Mouse moving on one element


    this.dispatchToElement(hovered, &#39;mousemove&#39;, event); // Mouse over on a new element

    if (hoveredTarget &amp;&amp; hoveredTarget !== lastHoveredTarget) {
      this.dispatchToElement(hovered, &#39;mouseover&#39;, event);
    }
  },

<span id='qrenderer-event-QRendererEventHandler-method-mouseout'>  /**
</span>   * @method mouseout
   * @param {*} proxy 
   */
  mouseout: function mouseout(event) {
    this.dispatchToElement(this._hovered, &#39;mouseout&#39;, event); // There might be some doms created by upper layer application
    // at the same level of painter.getViewportRoot() (e.g., tooltip
    // dom created by echarts), where &#39;globalout&#39; event should not
    // be triggered when mouse enters these doms. (But &#39;mouseout&#39;
    // should be triggered at the original hovered element as usual).

    var element = event.toElement || event.relatedTarget;
    var innerDom;

    do {
      element = element &amp;&amp; element.parentNode;
    } while (element &amp;&amp; element.nodeType !== 9 &amp;&amp; !(innerDom = element === this.painterRoot));

    !innerDom &amp;&amp; this.trigger(&#39;globalout&#39;, {
      event: event
    });
  },
  pagemousemove: dataUtil.curry(pageEventHandler, &#39;pagemousemove&#39;),
  pagemouseup: dataUtil.curry(pageEventHandler, &#39;pagemouseup&#39;),
  pagekeydown: dataUtil.curry(pageEventHandler, &#39;pagekeydown&#39;),
  pagekeyup: dataUtil.curry(pageEventHandler, &#39;pagekeyup&#39;),

<span id='qrenderer-event-QRendererEventHandler-method-resize'>  /**
</span>   * @method resize
   * @param {Event} event 
   */
  resize: function resize(event) {
    this._hovered = {};
  },

<span id='qrenderer-event-QRendererEventHandler-method-dispatch'>  /**
</span>   * @method dispatch
   * Dispatch event
   * @param {String} eventName
   * @param {Event} eventArgs
   */
  dispatch: function dispatch(eventName, eventArgs) {
    var handler = this[eventName];
    handler &amp;&amp; handler.call(this, eventArgs);
  },

<span id='qrenderer-event-QRendererEventHandler-method-dispose'>  /**
</span>   * @method dispose
   */
  dispose: function dispose() {
    this.proxy.dispose();
    this.storage = null;
    this.proxy = null;
    this.painter = null;
  },

<span id='qrenderer-event-QRendererEventHandler-method-setCursorStyle'>  /**
</span>   * @method setCursorStyle
   * 设置默认的cursor style
   * @param {String} [cursorStyle=&#39;default&#39;] 例如 crosshair
   */
  setCursorStyle: function setCursorStyle(cursorStyle) {
    var proxy = this.proxy;
    proxy.setCursor &amp;&amp; proxy.setCursor(cursorStyle);
  },

<span id='qrenderer-event-QRendererEventHandler-method-dispatchToElement'>  /**
</span>   * @private
   * @method dispatchToElement
   * 事件分发代理，把事件分发给 canvas 中绘制的元素。
   *
   * @param {Object} targetInfo {target, topTarget} 目标图形元素
   * @param {String} eventName 事件名称
   * @param {Object} event 事件对象
   */
  dispatchToElement: function dispatchToElement(targetInfo, eventName, event) {
    targetInfo = targetInfo || {};
    var el = targetInfo.target;

    if (el &amp;&amp; el.silent) {
      return;
    }

    var eventHandler = &#39;on&#39; + eventName;
    var eventPacket = makeEventPacket(eventName, targetInfo, event); //模拟DOM中的事件冒泡行为，事件一直向上层传播，直到没有父层节点为止。

    while (el) {
      el[eventHandler] &amp;&amp; (eventPacket.cancelBubble = el[eventHandler].call(el, eventPacket));
      el.trigger(eventName, eventPacket);
      el = el.parent;

      if (eventPacket.cancelBubble) {
        break;
      }
    }

    if (!eventPacket.cancelBubble) {
      // 冒泡到顶级 qrenderer 对象
      this.trigger(eventName, eventPacket); // 分发事件到用户自定义层
      // 用户有可能在全局 click 事件中 dispose，所以需要判断下 painter 是否存在

      this.painter &amp;&amp; this.painter.eachOtherLayer(function (layer) {
        if (typeof layer[eventHandler] === &#39;function&#39;) {
          layer[eventHandler].call(layer, eventPacket);
        }

        if (layer.trigger) {
          layer.trigger(eventName, eventPacket);
        }
      });
    }
  },

<span id='qrenderer-event-QRendererEventHandler-method-findHover'>  /**
</span>   * @method findHover
   * @param {Number} x
   * @param {Number} y
   * @param {Displayable} exclude
   * @return {Element}
   */
  findHover: function findHover(x, y, exclude) {
    var list = this.storage.getDisplayList();
    var out = {
      x: x,
      y: y
    }; //NOTE: 在元素数量非常庞大的时候，如 100 万个元素，这里的 for 循环会很慢，基本不能响应鼠标事件。

    for (var i = list.length - 1; i &gt;= 0; i--) {
      var hoverCheckResult;

      if (list[i] !== exclude &amp;&amp; !list[i].ignore &amp;&amp; (hoverCheckResult = isHover(list[i], x, y))) {
        !out.topTarget &amp;&amp; (out.topTarget = list[i]);

        if (hoverCheckResult !== SILENT) {
          out.target = list[i];
          break;
        }
      }
    }

    return out;
  },

<span id='qrenderer-event-QRendererEventHandler-method-processGesture'>  /**
</span>   * @method processGesture
   * @param {Event} event 
   * @param {String} phase 
   */
  processGesture: function processGesture(event, phase) {
    if (!this._gestureMgr) {
      this._gestureMgr = new GestureMgr();
    }

    var gestureMgr = this._gestureMgr;
    phase === &#39;start&#39; &amp;&amp; gestureMgr.clear();
    var gestureInfo = gestureMgr.recognize(event, this.findHover(event.qrX, event.qrY, null).target, this.proxy.dom);
    phase === &#39;end&#39; &amp;&amp; gestureMgr.clear(); // Do not do any preventDefault here. Upper application do that if necessary.

    if (gestureInfo) {
      var type = gestureInfo.type;
      event.gestureEvent = type;
      this.dispatchToElement({
        target: gestureInfo.target
      }, type, gestureInfo.event);
    }
  }
}; // Common handlers

dataUtil.each([&#39;click&#39;, &#39;mousedown&#39;, &#39;mouseup&#39;, &#39;mousewheel&#39;, &#39;dblclick&#39;, &#39;contextmenu&#39;], function (name) {
  QRendererEventHandler.prototype[name] = function (event) {
    // Find hover again to avoid click event is dispatched manually. Or click is triggered without mouseover
    var hovered = this.findHover(event.qrX, event.qrY);
    var hoveredTarget = hovered.target;

    if (name === &#39;mousedown&#39;) {
      this._downEl = hoveredTarget;
      this._downPoint = [event.qrX, event.qrY]; // In case click triggered before mouseup

      this._upEl = hoveredTarget;
    } else if (name === &#39;mouseup&#39;) {
      this._upEl = hoveredTarget;
    } else if (name === &#39;click&#39;) {
      if (this._downEl !== this._upEl // Original click event is triggered on the whole canvas element,
      // including the case that `mousedown` - `mousemove` - `mouseup`,
      // which should be filtered, otherwise it will bring trouble to
      // pan and zoom.
      || !this._downPoint // Arbitrary value
      || vectorUtil.dist(this._downPoint, [event.qrX, event.qrY]) &gt; 4) {
        return;
      }

      this._downPoint = null;
    } //把事件派发给目标元素


    this.dispatchToElement(hovered, name, event);
  };
});
classUtil.mixin(QRendererEventHandler, Eventful);
var _default = QRendererEventHandler;
module.exports = _default;</pre>
</body>
</html>
